{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Arcueid's Home Page</title>
    <link rel="icon" href="{% static 'open/favicon_nene.ico' %}" sizes="32x32">
    
    <style>
        body{
            background: url('https://arkueid.github.io/blog/wallhaven-l83ygy.png') top no-repeat;
            user-select: none;
            background-size: cover;
        }
        
        .rg_top{
            text-align: center;
            height: 100px;
            margin: 20px;
            font-style: oblique;
            line-height: 100px;
        }
        
        .rg_center{
            width: 500px;
            margin: auto;
            align-items: center;
            box-shadow: 0 0 5px 5px rgba(0 ,0 , 0, 0.3);
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            border-radius: 15px;
            border-style: outset;
            border-color:white;
            transition: all .3s ease-in-out;
        }
        
        #name {
            margin-top: 2rem;
            font-size: 25px;
            width: fit-content;
            margin-left: 29%;
            margin-right: 32%;
            filter: drop-shadow(3px 3px 2px rgba(249, 99, 174, 0.67));
            transition: all .3s ease;
            /* max-height: 30px; */
            color: white;
        }
          
        #name:hover {
        transform: translateX(10%);
            background-color: lightpink;
            border-radius: 25px;
            border-style: solid;
            border-width: 5px;
            border-color: lightpink;
        }
        
        footer{
            width: 100%;
            position: fixed;
            bottom: 0;
            text-align: center;
        }
        
        #avatar {
            width: 150px;
            height: 150px;
            margin-top: 20px;
            border-radius: 75px;
            border-style: solid;
            border-width: 5px;
            border-color: rgb(255, 212, 219);
            transition: transform .3s ease;
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
        
        }
        
        #avatar:hover{
            transform: perspective(200px) translateZ(20px) rotate(10deg);
        }
        
        img {
            margin-right: 10px;
            vertical-align:sub;
        }
        
        .logo{
            padding: 10px;
            border-radius: 30px;
            margin: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
            border-color: rgb(20, 111, 215);
            text-align: center;
            color: white;
            border-style: solid;
            background-color: rgb(20, 111, 215);
            transition: all .3s ease-in-out;
        }
        
        .github {
            width: 200px;
            height: 20px;
        }
        
        .bili {
            width: 200px;
            height: 25px;
        }
        
        .logo:active{
            transform: scale(0.95);
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
            color: lightcyan;
        }
        
        .logo:hover{
            transform: scale3d(1.05, 1.05, 1.05);
        }
        
        #title {
            color: white;
            font-size: 60px;
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .tip{
            width: 100px;
            height: 30px;
            color: red;
            text-align: center;
            font-size: 15px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
    </style>
</head>
<body>
    <div class="rg_top">
        <b id="title">Welcome!</b><br>
    </div>
    <div class="rg_center">
        <div>
            <img id="avatar" src="https://avatars.githubusercontent.com/u/60457155?v=4" alt="">
        </div>
        <p id="name" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-size: 25px;font-style: oblique;"><b>Arkueid's Home Page</b></p>
        <p>
            <span style="font-family:Comic Sans MS; font-size:18px; font-weight:bold; color: black">
                这是一个腾讯蓝鲸作业项目
            </span>
        </p>
        <div onclick="window.location.href='https://github.com/Arkueid'">
            <p class="logo">GitHub</p>
        </div>
        <div onclick="window.location.href='https://space.bilibili.com/31373462'">
            <p class="logo">Bilibili</p>
        </div>
    </div>
    <footer>
        <hr>
        <p style="margin: 5px; padding: 10px;color: white;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;text-align: center;padding: 10px; "><a href="https://github.com/Arkueid" style="text-decoration: none; color: whitesmoke; font-size: 16px">Created by Arkueid</a></p>
    </footer>
</body>
<script src="https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js"></script>

</html>